window.onload = (() => {
    // setTimeout(() => {
        $('.loader').hide();
    // }, 600);
})();

// 页面滚屏特效
(() => {
    // 获取main节点对象
    let bigBox = $('.main');
    // 获取侧边栏小点对象组
    let items = $('.aside-item');
    // 设置开关,用以防止多次滑动
    let flag = true;
    // 设置索引,控制bigBox的高度
    let index = 0;

    // 控制item的激活状态
    function resetItems() {
        //重置全部items的类
        items.each((i, val) => {
            $(val).attr('class', 'aside-item');
        });
        //设置当前item的类名
        $(items[index]).addClass('aside-item-on');
    }

    // 滚动处理函数
    function handler({ originalEvent: e }) {
        // 由于jq不支持wheelDelta,originalEvent里包含原生属性,对象解构
        // 开关打开才执行,防止屏幕滚动过快
        if (flag) {
            // 关闭开关
            flag = false;
            if (e.wheelDelta > 0 || e.detail < 0) {
                // 如果鼠标向上滚动
                index--;
                if (index < 0) index = 0;
            } else {
                // 鼠标向下滚动
                index++;
                if (index > items.length - 1) {
                    //如果索引大于页面数，就是滚到最后一张页面时，再滚动鼠标页面不再滚动
                    index = items.length - 1;
                }
            }
            // 重置所有items
            resetItems();
            // bigBox 整体上移index个页面
            bigBox.css('top', -index * $(document.body).height() + 'px');
            setTimeout(() => {
                //页面滚动间隔一秒，防止滚动太快,时间长于css的过渡
                flag = true; //重新开启开关
            }, 1000);
        }
    }

    $(document).on('mousewheel', handler); // 添加滚轮滚动事件
    $(document).on('DOMMouseScroll', handler); // 添加滚轮滚动事件，适配火狐浏览器

    // 侧边栏点击处理
    items.each((i, val) => {
        $(val).on('click', () => {
            // 改变索引
            index = i;
            // 重置所有items
            resetItems();
            bigBox.css('top', -index * $(document.body).height() + 'px');
        });
    });

    // 置顶按钮事件
    $('.aside-item-big').on('click', () => {
        // 索引为0
        index = 0;
        bigBox.css('top', 0);
        // 重置所有items
        resetItems();
    });

    // 主页下箭头事件
    $('.home-arrow').on('click', () => {
        index = 1;
        bigBox.css('top', -$(document.body).height() + 'px');
        resetItems();
    });
})();

// 中英文切换
(() => {
    // 找到切换按钮元素
    let btn = $('.lang');
    // 控制中英文切换的状态,默认zh--中文
    let lang = 'zh';

    // 切换中英文
    function changeLanguage(lang) {
        $('[data-lang]').each((i, val) => {
            $(val).attr('data-lang', lang);
            $(val).text($(val).data(lang));
            console.log();
        });
    }

    // 切换处理函数
    function handler() {
        if (lang == 'zh') {
            // 若当前为中文,则切换为英文
            lang = 'en';
        } else {
            lang = 'zh';
        }
        // 切换中英文
        changeLanguage(lang);
        // 默认中文,没有该类,则添加该类,变为英文模式.否则变为中文
        btn.toggleClass('lang-on');
    }

    // 初始化，使用中文
    changeLanguage('zh');

    // 添加鼠标抬起事件(为了样式所以不用点击)
    btn.on('mouseup', handler);
})();

// 3d悬浮窗随鼠标移动
(() => {
    // 节流
    let flag = false;
    // 获取悬浮窗元素
    let box3D = $('.intro-3d');
    // 鼠标在元素上移动时
    box3D.mousemove(function (e) {
        if (flag) return;
        flag = true;
        setTimeout(() => {
            flag = false;
        }, 100);
        // 获取元素宽高
        let w = box3D.width();
        let h = box3D.height();
        // 获取鼠标相对于该元素的位置
        let x = e.offsetX;
        let y = e.offsetY;
        // 高亮阴影设置
        let light = $('.light');
        light.css({
            top: y + 'px',
            left: x + 'px',
        });

        // 当x = 0; roy=-10; x=350; roy=10;
        // 当y = 0; rox=-10; y=120; rox=10;
        // 步数
        $wi = x - w / 2;
        $hi = y - h / 2;
        // 步长
        let stepX = 10 / (w / 2);
        let stepY = 10 / (h / 2);

        let roX = stepY * $hi; // -10~10
        let roY = stepX * $wi; // -10~10
        // 设置偏移
        box3D.css(
            'transform',
            `rotateX(${-roX}deg) rotateY(${-roY}deg) translate(${roY / 2}px,${
                roX / 2
            }px) scale(1.03)`
        );
    });
    // 鼠标移出时,恢复原状
    box3D.mouseleave(function () {
        box3D.css('transform', `none`);
    });
})();

// 图片方向感知3D动画
(() => {
    let items = $('.about-icon-item');

    /**
     * 获取鼠标进入元素时的方向
     * @param {Object} e 指向鼠标--jq对象
     * @param {Object} obj 当前DOM元素--jq对象
     * @return {Number} d --> 0: top  1: right  2: bottom  3: left
     */
    function getDirection(e, obj) {
        let w = obj.width(),
            h = obj.height(),
            x = e.pageX - obj.offset().left - (w / 2) * (w > h ? h / w : 1),
            y = e.pageY - obj.offset().top - (h / 2) * (h > w ? w / h : 1),
            d = Math.round(Math.atan2(y, x) / 1.57079 + 5) % 4;

        return d;
    }
    /**
     * 修改class类名
     * @param {Object} e 指向鼠标--jq对象
     * @param {Object} obj 当前DOM元素--jq对象
     * @param {String} state 判断是移入还是移出--"in":移入 / "out":移出
     */
    function addClass(e, obj, state) {
        // 获取方向,声明保存class后缀名的变量
        let direction = getDirection(e, obj),
            class_suffix = '';

        // 初始化类名,防止不断追加
        obj.attr('class', 'about-icon-item');

        // 根据方向值来改变class后缀
        switch (direction) {
            case 0:
                class_suffix = '-top';
                break;
            case 1:
                class_suffix = '-right';
                break;
            case 2:
                class_suffix = '-bottom';
                break;
            case 3:
                class_suffix = '-left';
                break;
        }

        // 添加class
        obj.addClass(state + class_suffix);
    }
    // 绑定事件
    items.each((i, val) => {
        $(val).on('mouseover', function (e) {
            // e为鼠标的jq对象,this指向鼠标所在的方块元素
            addClass(e, $(this), 'in');
        });
        $(val).on('mouseout', function (e) {
            // e为鼠标的jq对象,this指向鼠标所在的方块元素
            addClass(e, $(this), 'out');
        });
    });
})();

// 技能圆环进度条
(() => {
    // 渐变对象的颜色值
    var gradients = [
        { t: '#e98c12', b: '#E2470F' },
        { t: '#17b9b9', b: '#2F80ED' },
        { t: '#faf085', b: '#efdd1b' },
        { t: '#68d4a3', b: '#0e8869' },
        { t: '#ff0000', b: '#C3002F' },
        { t: '#00D8FF', b: '#0bb1ce' },
        { t: '#8ccf00', b: '#80bd01' },
        { t: '#8093d1', b: '#7b8ec9' },
        { t: '#fff', b: '#f0f0f0' },
    ];
    // 每个进度条的数值
    var ends = [90, 90, 85, 75, 55, 35, 65, 40, 30];
    function initGradients(i) {
        var g = {
            top: gradients[i].t,
            bottom: gradients[i].b,
        };
        return g;
    }
    function initEnd(i) {
        return 2.7 * ends[i];
    }
    function initCanvas(parent, i) {
        parent.prepend(`<canvas width="126" height="126" class="card-canvas"></canvas>`);
        var canvas = parent.children()[0];
        return canvas;
    }
    function initProgress(p, i) {
        this.parent = p;
        this.canvas = initCanvas(p, i);
        this.gradient = initGradients(i);
        this.start = -90;
        this.end = initEnd(i);
        this.text = 0;
        return this;
    }
    function mouseover(progress, textElement, i) {
        var ctx = progress.canvas.getContext('2d');
        var g = ctx.createLinearGradient(0, 0, 110, 110);
        g.addColorStop(0, progress.gradient.top);
        g.addColorStop(1, progress.gradient.bottom);
        var init = -90;

        var t = setInterval(() => {
            init += 3.6;
            ctx.beginPath();
            ctx.arc(63, 63, 57, (progress.start * Math.PI) / 180, (init * Math.PI) / 180);
            ctx.strokeStyle = g;
            ctx.lineWidth = 4;
            ctx.stroke();
            progress.text++;
            textElement.html(`${progress.text}%`);
            if (progress.text >= ends[i]) {
                clearInterval(t);
            }
        }, 8);
    }
    $('.card').each((i, el) => {
        var el = $(el);
        var $p = el.find('p');
        el.on('mouseenter', () => {
            var progress = new initProgress(el, i);
            mouseover(progress, $p, i);
        });
        el.on('mouseleave', () => {
            el.children('canvas').remove();
        });
    });
})();
